<script setup>
import { useDataStore } from '@/stores/data'
import { computed } from 'vue';
const { chooseDay } =useDataStore()

//import { solarToLunar } from 'vue-solar-lunar';
const  data= useDataStore()
console.log(data.detial)
//拆分日期
const day = computed(() => {
    const date = new Date(data.chooseDay)
    return  date.getDate()
    
})
//const LunarDay=computed(()=>solarToLunar(data.year,data.month,day.value ))
//console.log(LunarDay)

</script>
<template>
    <div class="cal-data">
        <div class="date">
            <div class="day">{{data.detial.weekday }} </div>
            <div class="day-box"> 
                <div class="time"> {{ day }}</div>
            </div>
        </div>
        <div class="lunar"> 
            <div class="lunar-year">{{ data.detial.lunarYear }} {{data.detial.animalsYear  }}</div>
            <div class="lunar-day"> {{ data.detial.lunar }} </div>
        </div>

        <div class="suitandavoid"> 
            <div class="suit"><span>宜</span>:&nbsp;{{ data.detial.suit }}</div>
            <div class="avoid"><span>忌</span>:&nbsp;{{ data.detial.avoid }}</div>
        </div>
    </div>
</template>
<style scoped lang="scss">
.cal-data {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 90%;
    height: 70px;
    background-color: #f5f5f5;
    margin:10px auto;
    border-radius: 5px;
    .date{
        display: flex;
        align-items: center;
        .day{
            writing-mode: vertical-lr;
            margin-right: 10px;
            font-size: 20px;
            color: #666;
        }
        .day-box{
            padding: 10px;
            width: 30px;
            height: 30px;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            font-weight: bold;
            background-color: rgb(165, 209, 244);
            
        }
    }
    .lunar{
        font-size: 14px;
        margin-left: -20px;
        
        .lunar-year{
            margin-bottom: 5px;
         }
        .lunar-day{
            margin-top: 5px;
         }
    }
    .suitandavoid{
        .suit{
            
            span{
                background-color: green;
                padding: 5px;
                border-radius: 5px;
                color: white;
                margin-right: 5px;
            
            }
        }
        .avoid{
            margin-top: 14px;
            span{
                background-color: red;
                padding: 5px;
                border-radius: 5px;
                color: white;
                margin-right: 5px;
            }
        }
        
    }
}
</style>
